<template>
  <div>
    <!-- 操作区 -->
    <div class="gongneng">
      <a-checkbox v-model="qx" class="font" @change="dataSelectChange"
        >全选/取消
      </a-checkbox>
      <a-button type="primary" size="small" @click="counterelection" ghost
        >反选</a-button
      >&nbsp;
      <a-button type="primary" ghost size="small" class="pltb" @click="PLsaveOnline">
        批量同步
      </a-button>
    </div>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
        @keyup.enter.native="searchQuery"
      >
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="项目名称:" class="font">
              <a-input v-model="queryParam.pjtname"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="行政区:" class="font">
              <a-select
                v-model="queryParam.city"
                @change="changeCity"
                :disabled="isInput"
              >
                <a-select-option
                  :value="item.no"
                  v-for="(item, index) in citydata"
                  :key="index"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="3" :lg="7" :md="8" :sm="24">
            <a-form-item>
              <a-select v-model="queryParam.area" :disabled="isInput2">
                <a-select-option
                  :value="item.no"
                  v-for="(item, index) in xiandata"
                  :key="index"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-button type="primary" @click="searchQuery" icon="search"
                >查询</a-button
              >
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                class="cz"
                >重置</a-button
              >
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-spin :spinning="spinning" tip="数据加载中...">
      <a-table
        bordered
        rowKey="dataSec"
        ref="table"
        :scroll="{ x: 0 }"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        @change="handleTableChange"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="synchronization(record)">同步</a>
        </span>
      </a-table>
    </a-spin>
  </div>
</template>

<script>
import { fkCitylist, cityQueryXian, select, saveOnline } from "../../api/api";
export default {
  data() {
    return {
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          title: "项目编号",
          dataIndex: "projNum",
          align: "left",
          width: 160,
        },
        {
          title: "项目名称",
          dataIndex: "projName",
          align: "left",
          width: 140,
          scopedSlots: { customRender: "projName" },
        },
        {
          title: "行政区划",
          dataIndex: "projOrg",
          align: "left",
          width: 150,
        },
        {
          title: "所属乡镇",
          dataIndex: "projOrgX",
          align: "left",
          width: 100,
        },
        {
          title: "所属村",
          dataIndex: "projOrgXc",
          align: "left",
          width: 80,
        },
        {
          title: "发起时间",
          dataIndex: "sysInitDate",
          align: "left",
          width: 160,
        },
        {
          title: "发起人",
          dataIndex: "sysInitUsername",
          align: "left",
          width: 140,
        },
        {
          title: "是否扩建项目",
          dataIndex: "sysIsGkj",
          width: 120,
          align: "left",
          // scopedSlots: { customRender: "sysIsGkj" },
          customRender: function (t, r, index) {
            if (r.sysIsGkj == 0) {
              return "否";
            } else {
              return "是";
            }
          },
        },
        {
          title: "阶段类型",
          width: 100,
          dataIndex: "changeType",
          align: "left",
          customRender: function (t, rowdata, index) {
            if (rowdata.changeType == "0") {
              return " 取地阶段";
            } else if (rowdata.changeType == "1") {
              return " 设施建成";
            } else if (rowdata.changeType == "2") {
              return " 续期阶段";
            } else if (rowdata.changeType == "3") {
              return " 转为其他农业用途";
            } else if (rowdata.changeType == "4") {
              return " 停止生产";
            }
          },
        },
        {
          title: "开始时间",
          dataIndex: "changeStartDate",
          align: "left",
          width: 140,
        },
        {
          title: "结束时间",
          dataIndex: "changeEndDate",
          align: "left",
          width: 140,
        },
        {
          title: "项目用途",
          dataIndex: "curuseName",
          align: "left",
          width: 140,
        },
        {
          title: "地块数量",
          dataIndex: "landNumb",
          align: "left",
          width: 80,
        },
        {
          title: "用地总规模",
          dataIndex: "landSum",
          align: "left",
          width: 140,
        },
        {
          title: "操作",
          width: 120,
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      queryParam: { area: "0", city: "3700", pjtname: "" },
      citydata: [], //行政区下拉接口(市)
      xiandata: [], //行政区下拉接口(县)
      user: JSON.parse(localStorage.getItem("user")),
      isInput: false,
      isInput2: false,
      selectedRowKeys: [],
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 10, // 默认每页显示数量
        pageSizeOptions: ["10", "50", "100"],
        showTotal: (total, range) => {
          return "共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
        
      },
      spinning: true,
      sel: true,
      qx: false,
    };
  },
  mounted() {
    this.dataList();
    this.getCtiydata();
    this.changeCity();
  },
  methods: {
   // 处理分页事件
   handleTableChange(pagination, filters, sorter) {
    this.ipagination.current = pagination.current;
    this.ipagination.pageSize = pagination.pageSize;
    this.dataList();
    },

    async dataList() {
      if (this.user.role == "xian" || this.user.role == "shi") {
        this.queryParam.area =
          this.user.role == "xian" ? this.user.fkDept : this.queryParam.area;
        this.queryParam.city = this.user.fkDept.slice(0, 4);
        this.isInput = true;
        this.isInput2 = this.user.role == "xian" ? true : false;
      }
      const pag = this.ipagination;
      const params = {
        keyWord: this.queryParam.pjtname,
        pageNo: pag.current,
        pageSize: pag.pageSize,
        city: this.queryParam.city,
        area: this.queryParam.area,
      };
      const data = await select(params);
      if (data.code == 200) {
        this.spinning = false;
        this.dataSource = data.result.records;
        this.ipagination.total = data.result.total;
      } else {
        this.$message.error(data.message);
      }
    },
    //查询
    searchQuery() {
      this.dataList();
    },
    //重置
    searchReset() {
      this.queryParam = { area: "", city: "" };
      this.dataList();
    },
    //获取行政区
    async getCtiydata() {
      const res = await fkCitylist();
      if (res.code == 200) {
        const arr = res.result;
        arr.unshift({
          name: "全部",
          no: "3700",
        });
        this.citydata = arr;
      } else {
        this.$message.error(res.message);
      }
    },
    //选择行政区获取县级数据
    async changeCity(e) {
      console.log(e, "eee");
      const data = await cityQueryXian({
        cityNo: e == undefined ? this.user.fkDept.slice(0, 4) : e,
      });
      if (data.code == 200) {
        const brr = data.result;
        brr.unshift({
          name: "全部",
          no: "0",
        });
        this.xiandata = brr;
      } else {
        this.$message.error(res.message);
      }
    },
    //表格复选框事件
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    //全选/取消事件
    dataSelectChange(e) {
      const arr = this.dataSource.map((item) => item.dataSec);
      this.selectedRowKeys = e.target.checked == true ? arr : [];
    },
    //反选
    counterelection() {
      if (this.qx == true || this.selectedRowKeys.length > 0) {
        this.qx = false;
        this.selectedRowKeys = [];
      } else {
        this.iscont = !this.iscont;
        const arr = [];
        this.dataSource.map((item, index) => {
          arr.push(item.dataSec);
        });
        this.selectedRowKeys = this.iscont == true ? arr : [];
      }
    },
    //同步
    async synchronization(record) {
      const data = await saveOnline({ sec: record.dataSec });
      if (data.code == 200) {
        this.$success({
          title: data.message,
          okText: "确定",
        });
        this.dataList();
      }else
      {
        this.$warning({
          title: data.message,
          okText: "确定",
        });
      }
    },
    //批量同步
   async PLsaveOnline(){
    if(this.selectedRowKeys.length > 0)
   {
    const data = await saveOnline({ sec: this.selectedRowKeys.join(",")});
      if (data.code == 200) {
        this.$success({
          title: data.message,
          okText: "确定",
        });
        this.dataList();
      }else
      {
        this.$warning({
          title: data.message,
          okText: "确定",
        });
      }
   }else
   {
    this.$warning({
          title: '请选择需要操作得数据',
          okText: "确定",
        });
   }
  
    }
  },
};
</script>

<style lang="less" scoped>
.gongneng {
  padding-bottom: 15px;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  padding: 10px;
}
.pltb {
  margin-left: 50px;
}
.cz {
  margin-left: 8px;
}
/deep/ .ant-table-body {
  //样式穿透
  overflow-x: auto !important;
}
/deep/ .ant-table-align-center {
  //   background: #e4f6ff !important;
  font-weight: bold !important;
}
/deep/ .ant-table-align-left {
  font-weight: bold !important;
}
</style>